<template>
  <div>
    <Form
      :select-show="false"
      oneitem="合作商搜索"
      label-width="96px"
      :search-list="parentList"
      :total-count="totalCount"
      :total-page="totalPage"
      @newCreateFn="newCreateFn"
      @changeList="changeList"
      @searchResultFn="searchResultFn"
    >
      <template #tableForm>
        <el-table-column label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="name" label="合作商名称" width="194" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="vmCount" label="设备数量" />
        <el-table-column prop="ratio" label="分成比例">
          <template slot-scope="scope">
            {{ scope.row.ratio }}%
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系人" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="resetPwd(scope.row)">重置密码</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" style="color:red" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <!-- 新增 -->
    <el-dialog :visible.sync=" partnerVisible" :title="title" width="630px" @closed="closedDialog">
      <el-form ref="partnerForm" :model="partnerForm" :rules="partnerRules">
        <el-form-item label="合作商名称：" prop="name">
          <el-input
            v-model="partnerForm.name"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input
            v-model="partnerForm.contact"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input
            v-model="partnerForm.mobile"
            placeholder="请输入"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="分成比例(%)：" prop="ratio">
          <el-input-number
            v-model="partnerForm.ratio"
            controls-position="right"
            :min="0"
            :max="100"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item v-if="!partnerForm.id" label="账号：" prop="account">
          <el-input
            v-model="partnerForm.account"
            placeholder="请输入"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <el-form-item v-if="!partnerForm.id" label="密码：" prop="password">
          <el-input
            v-model="partnerForm.password"
            placeholder="请输入"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button id="buttom2" @click="partnerVisible=false">取 消</el-button>
        <el-button id="buttom1" type="primary" @click="addParent">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :visible.sync=" partneInfo" title="合作商详情" width="630px">
      <el-form>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合作商名称：">
              {{ partneInfoForm.name }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：">
              {{ partneInfoForm.contact }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：">
              {{ partneInfoForm.mobile }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成分比例：">
              {{ partneInfoForm.ratio }}
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { partnerSearch, addPartner, resetPwd, editPartner, delPartner } from '@/api'
export default {
  components: { Form },
  data() {
    return {
      pageIndex: 1,
      parentList: [], // 合作商列表
      partnerVisible: false,
      partnerForm: {
        name: null,
        contact: null,
        mobile: null,
        ratio: undefined,
        account: null,
        password: null
      },
      partnerRules: {
        name: [
          { required: true, message: '请输入' }
        ],
        contact: [
          { required: true, message: '请输入' }
        ],
        mobile: [
          { required: true, message: '请输入' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确号码', trigger: 'change' }
        ],
        ratio: [
          { required: true, message: '请输入' }
        ],
        account: [
          { required: true, message: '请输入' }
        ],
        password: [
          { required: true, message: '请输入' }
        ]
      },
      partneInfo: false,
      partneInfoForm: {},
      totalPage: null,
      totalCount: null
    }
  },
  computed: {
    title() {
      return this.partnerForm.id ? '修改合作商' : '新增合作商'
    }
  },
  created() {
    this.parentFn(this.pageIndex)
  },
  // 列表接口
  methods: {
    async parentFn(pageIndex, name) {
      const res = await partnerSearch({ pageIndex, name, pageSize: 10 })
      this.parentList = res.data.currentPageRecords
      this.totalPage = res.data.totalPage
      this.totalCount = res.data.totalCount
    },
    indexMethod(index) {
      return this.pageIndex === 1 ? index + 1 : Number(`${this.pageIndex - 1}${index}`) + 1
    },
    newCreateFn() {
      this.partnerVisible = true
    },
    // 确定添加
    addParent() {
      this.$refs.partnerForm.validate(async(valid) => {
        if (!valid) return
        let res
        if (this.partnerForm.id) {
          res = await editPartner(this.partnerForm.id, this.partnerForm)
        } else {
          res = await addPartner(this.partnerForm)
        }
        this.parentFn(this.pageIndex)
        this.partnerVisible = false
        if (res.data) {
          this.$message({
            type: 'success',
            message: this.title + '成功'
          })
        }
      })
    },
    // 重置密码
    resetPwd(row) {
      this.$confirm('', '确定要重置合作商密码吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        await resetPwd(row.id)
        this.$message({
          type: 'success',
          message: '重置成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    },
    // 查看详情
    handleClick(row) {
      console.log(row)
      this.partneInfoForm = row
      console.log(this.partneInfoForm)
      this.partneInfo = true
    },
    // 修改
    edit(row) {
      console.log(row)
      this.partnerForm = row
      this.partnerVisible = true
    },
    closedDialog() {
      this.partnerForm = {
        name: null,
        contact: null,
        mobile: null,
        ratio: undefined,
        account: null,
        password: null
      }
      this.$refs.partnerForm.resetFields()
    },
    // 页数改变
    async changeList(pageIndex) {
      this.pageIndex = pageIndex
      this.searchFn(pageIndex)
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPartner(row.id).then(() => {
          this.regionFn(this.pageIndex)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(res => {
          this.$message.error(res.response.data)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索
    searchResultFn(val) {
      console.log(val)
      // taskCode
      this.parentFn(1, val.taskCode)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input-number{
  width: 396px;
}
#buttom1 {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  border: none;
}

#buttom2 {
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background-color: #fbf4f0 !important;
  border: none;
  color: #655b56 !important;
}
.el-col{
  margin-bottom: 0;
  height: 36px;
}
</style>
